<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .top {
            width: 100vw;
            height: 8vh;
            background-color: #ff8a00;
            display: flex;
        }

        .top>div {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
        }

        .top>div:nth-of-type(1)>img {
            width: 150px;
        }

        .top>div:nth-of-type(2)>img {
            width: 35px;
            margin-left: 25px;
        }

        .div1 {
            width: 90vw;
            height: 6vh;
            margin: auto;
            display: flex;
            align-items: center;

        }

        .div1>p>span {
            font-size: 1.1rem;
            font-weight: bold;
        }

        .sou {
            width: 100vw;
            height: 10vh;
            background-color: rgb(225, 225, 224);
            display: flex;
            align-items: center;
            border: 1px solid #979797;
        }

        .sou>input {
            width: 90vw;
            height: 5vh;
            border-radius: 5px;
            margin-left: .8rem;
        }

        .sou>img {
            width: 7vw;
            position: absolute;
            right: 1.5rem;
        }

        .sou>span {
            position: absolute;
            right: 3.5rem;
        }
        .hang {
            width: 100vw;
            height: 7vh;
            background-color: lightblue;
            display: flex;
            border-top: 1px solid rgb(114, 113, 113);
            border-bottom: 1px solid rgb(108, 108, 108);
        }
        .hang>select{
            border: none;
            flex: 1;
            font-size: 1.3rem;
            font-weight: bold;
            color: rgb(125, 125, 125);
            text-align: right;
            padding: 5px;
        }
        .fang{
            width: 100vw;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .fang1{
            width: 90vw;
            height: 25vh;
            display: flex;
            align-items: center;
            border-bottom: 2px solid  #ff8a00;
        }
        .fang1>div:nth-of-type(1){
            flex: 1;
        }
        .fang1>div:nth-of-type(1)>img{
            width: 100%;
        }
        .fang1>div:nth-of-type(2){
            flex: 2;
            background-color: aliceblue;
            padding-left: .8rem;
        }
        .fang1>div:nth-of-type(2)>p{
            font-weight: bold;
            line-height: 2rem;
            font-size: 1rem;
        }
        .fang1>div:nth-of-type(2)>span{
            font-size: .8rem;
            line-height: .8rem;
        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(3){
            color: #716f6f;
        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(4){
            color: rgb(95, 154, 6);
            border: 1px solid rgb(95, 154, 6);
            line-height: 1.8rem;

            padding: .2rem;
        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(5){
            line-height: 1.8rem;
           float: right;
           color:#ff8a00 ;
        }
        .fang1:nth-of-type(4){
            border-bottom: none;
        }
        .bottom1{
            width: 100vw;
            background-color: #2f3130;
            color: #737373;
        }
        .bottom1>div:nth-of-type(1){
            width: 90vw;
            margin: auto;
            border-bottom: 1px solid #737373;
        }
        .bottom1>div:nth-of-type(1)>span{
            line-height: 2.5rem;
        }
        .bottom1>div:nth-of-type(2){
            height: 15vh;
            display: flex;
            align-items: center;
        }
        .bottom1>div:nth-of-type(2)>div{
            flex: 1;
            margin-left: 1rem;
            display: flex;
        }
        .bottom1>div:nth-of-type(2)>div>div:nth-of-type(2){
            margin-left: 1.1rem;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="top">
            <div>
                <img src="./logo.jpg" alt="">
            </div>
            <div>
                <img src="./my.jpg" alt="">
                <img src="./xiazai.jpg" alt="">
            </div>
        </div>
        <div class="div1">
            <p><span>首页&nbsp;></span>&nbsp;找回密码</p>
        </div>
        <div class="sou">
            <input type="text" placeholder="">
            <span>|</span>
            <img src="./search_03.png" alt="">
        </div>
        <div class="hang">
            <select name="" id="">
                <option value="区域">区域</option>
            </select>
            <select name="" id="">
                <option value="区域">价格</option>
            </select>
            <select name="" id="">
                <option value="区域">房型</option>
            </select>
            <select name="" id="">
                <option value="区域">更多</option>
            </select>
        </div>
        <div class="fang">
            <div class="fang1">
                <div>
                    <img src="./img1.png" alt="">
                </div>
                <div>
                    <p>西便门外大街2室1厅89</p>
                    <span>2室1厅96m³&nbsp;&nbsp;</span><span>南北</span><br>
                    <span>青岛新天地</span><br>
                    <span>集中供暖</span>
                    <span>3700元/月</span>
                </div>
            </div>
            <div class="fang1">
                <div>
                    <img src="./img2.png" alt="">
                </div>
                <div>
                    <p>青年汇二期&nbsp;免税三居</p>
                    <span>2室1厅96m³&nbsp;&nbsp;</span><span>南北</span><br>
                    <span>青年汇家园</span><br>
                    <span>集中供暖</span>
                    <span>4610元/月</span>
                </div>
            </div>
            <div class="fang1">
                <div>
                    <img src="./img3.png" alt="">
                </div>
                <div>
                    <p>博雅德源稀缺两居</p>
                    <span>2室1厅96m³&nbsp;&nbsp;</span><span>南北</span><br>
                    <span>西二旗</span><br>
                    <span>天然气供暖</span>
                    <span>3420元/月</span>
                </div>
            </div>
            <div class="fang1">
                <div>
                    <img src="./img4.png" alt="">
                </div>
                <div>
                    <p>朝阳北路蹭车库自选首</p>
                    <span>2室1厅96m³&nbsp;&nbsp;</span><span>南北</span><br>
                    <span>武夷花园二手房</span><br>
                    <span>集中供暖</span>
                    <span>5408元/月</span>
                </div>
            </div>
        </div>
        <div class="bottom1">
            <div>
                <span>北京找房无忧 &nbsp; >  &nbsp; 首页</span>
            </div>
            <div>
                <div>
                    <div>
                        <img src="./apple.png" alt="">
                    </div>
                    <div>
                        <span>iPhone</span><br>
                        <span>客户端</span>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="./android.png" alt="">
                    </div>
                    <div>
                        <span>Android</span><br>
                        <span>客户端</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>